<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        canvas{
            border:1px solid #000;
            margin-top: 200px;
        }
        .bg{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="bg">
    <canvas width="500" height="400" id="canvas" style="">
        您的浏览器不支持canvas，请更新！
    </canvas>
</div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var p1=new Image();
    p1.src="img/p3.png";
    p1.onload=function(){
        //平移中心点
        var deg=15*Math.PI/180;
        ctx.translate(250,200);
        setInterval(function () {
            ctx.clearRect(-250,-200,500,400);
            ctx.rotate(deg);
            ctx.drawImage(p1,0,0);
        },100)
    }

</script>
</html>